<div th:fragment="html">
    <script>
        $(function(){
            var data4Vue = {
                uri:'foreregister',
                result: [],
                user:{name:'', password:'', repeatPassword:''}
            };
            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted:function(){
                    linkDefaultActions();
                },
                methods: {
                    register:function(){
                        var url =  this.uri;
                        if(0==this.user.name.length){
                            $("span.errorMessage").html("请输入用户名");
                            $("div.registerErrorMessageDiv").css("visibility","visible");
                            return;
                        }
                        if(0==this.user.password.length){
                            $("span.errorMessage").html("请输入密码");
                            $("div.registerErrorMessageDiv").css("visibility","visible");
                            return;
                        }
                        if(0==this.user.repeatPassword.length){
                            $("span.errorMessage").html("请输入重复密码");
                            $("div.registerErrorMessageDiv").css("visibility","visible");
                            return;
                        }
                        if(this.user.password !=this.user.repeatPassword){
                            $("span.errorMessage").html("重复密码不一致");
                            $("div.registerErrorMessageDiv").css("visibility","visible");
                            return;
                        }

                        axios.post(url,this.user).then(function(response) {
                            var result = response.data;
                            if(result.code==200){
                                location.href="registerSuccess";
                            }
                            else{
                                $("span.errorMessage").html(result.message);
                                $("div.registerErrorMessageDiv").css("visibility","visible");
                            }
                        });
                    }
                }
            });
        })
    </script>
    <div class="registerDiv">
        <div class="registerErrorMessageDiv">
            <div class="alert alert-danger" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                <span class="errorMessage"></span>
            </div>
        </div>


        <table class="registerTable" align="center">
            <tr>
                <td  class="registerTip registerTableLeftTD">设置会员名</td>
                <td></td>
            </tr>
            <tr>
                <td class="registerTableLeftTD">登陆名</td>
                <td  class="registerTableRightTD"><input v-model="user.name" placeholder="会员名一旦设置成功，无法修改" > </td>
            </tr>
            <tr>
                <td  class="registerTip registerTableLeftTD">设置登陆密码</td>
                <td  class="registerTableRightTD">登陆时验证，保护账号信息</td>
            </tr>
            <tr>
                <td class="registerTableLeftTD">登陆密码</td>
                <td class="registerTableRightTD"><input v-model="user.password"  type="password"  placeholder="设置你的登陆密码" > </td>
            </tr>
            <tr>
                <td class="registerTableLeftTD">密码确认</td>
                <td class="registerTableRightTD"><input v-model="user.repeatPassword"   type="password"  placeholder="请再次输入你的密码" > </td>
            </tr>

            <tr>
                <td colspan="2" class="registerButtonTD">
                    <a @click="register"><button>提   交</button></a>
                </td>
            </tr>
        </table>
    </div>
</div>
